<script setup lang="ts">
import { toRefs, computed } from 'vue';
import { useRouter } from "vue-router";
const router = useRouter()
const props = defineProps({
  text: {
    type: String,
    default: ''
  },
  path: {
    type: String,
    default: ''
  },
  width: {
    type: [String || Number],
    default: ''
  },
  height: {
    type: [String || Number],
    default: '34'
  },
  size: {
    type: [String || Number],
    default: '14'
  },
  border: {
    type: [String || Number],
    default: '2'
  },
  padding: {
    type: [String || Number],
    default: '16'
  },
  radius: {
    type: [String || Number],
    default: '12'
  },
  bgColor: {
    type: String,
    default: '#fff'
  },
  borderColor: {
    type: String,
    default: '90deg, #252086, #E60012'
  }
})

const { text, width, height, size, border, padding, radius, bgColor, borderColor } = toRefs(props)

const box = computed(() => {
  return {
    width: `${width.value}px`,
    height: `${height.value}px`,
    padding: `0 ${padding.value}px`,
    fontSize: `${size.value}px`,
    border: `${border.value}px solid transparent`,
    borderRadius: `${radius.value}px`,
    backgroundImage: `linear-gradient(to right, ${bgColor.value}, ${bgColor.value}), linear-gradient(${borderColor.value})`
  }
})
const handleClick = (src: string) => {
  if (!src) return
  router.push(src)
}
</script>

<template>
  <div class="box-wrapper" :style="box" @click="handleClick(path)">
    <slot>{{ text }}</slot>
  </div>
</template>

<style lang="scss" scoped>
.box-wrapper {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  cursor: pointer;
  user-select: none;
  transition: all ease-out 0.3s;

  &:hover {
    border-color: transparent;

    &::after {
      opacity: 1;
      transform: rotateX(180deg);
    }
  }

  &::after {
    // content: '';
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border: 2px solid #ccc;
    opacity: 0;
    transition: all 0.5s ease 0s;
    margin: -2px;
    text-align: center;
    transform: scale(1, 1);
    border-radius: 12px;
    background-image: linear-gradient(to right, #fff, #fff), linear-gradient(90deg, #252086, #E60012);
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
  }
}
</style>
